<template>
    <div class="imagePreview">
        <el-image :src="path" :lazy="true" class="detail-image">
            <div slot="placeholder" class="image-slot text">
                加载中<span class="dot">...</span>
            </div>
            <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
            </div>
        </el-image>
        <div class="el-upload-list__item-actions" @click="handlePreview()">
          <span><i class="el-icon-zoom-in"></i></span>
        </div>
        <el-dialog
                class="imageDialog"
                :visible.sync="isShowPreview"
                append-to-body
                style="text-align: center"
        >
            <div slot="title"></div>
            <img :src="path" class="ele-gallery-image">
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'alImages',
    props: {
        path: {
            type: String,
            default: ''
        }
    },
    data () {
        return {
            isShowPreview: false
        };
    },
    methods: {
        handlePreview () {
            console.log('123');
            this.isShowPreview = true;
        }
    }
};
</script>

<style lang="scss">
    .imagePreview{
        margin-right: 10px;
        display: inline-block;
        width: 100px;
        height: 100px;
        position: relative;
        .el-upload-list__item-actions{
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            cursor: default;
            text-align: center;
            color: #fff;
            opacity: 0;
            font-size: 20px;
            background-color: rgba(0,0,0,.5);
            -webkit-transition: opacity .3s;
            transition: opacity .3s;
            &:after {
                display: inline-block;
                content: "";
                height: 100%;
                vertical-align: middle;
            }
            &:hover{
                cursor: pointer;
                opacity: 1;
            }
        }
    }
    .imageDialog{
        .ele-gallery-image{
            width: 100%;
            max-width: 750px;
        }
    }

</style>
